<template>
  <div class="n-c-m">
    <Select
      v-if="noteList.data"
      :value="parseInt(this.$route.query.nid)"
      style="width:400px"
      placeholder="请选择手记"
      @on-select="onSelect"
    >
      <Option v-for="item in noteList.data" :value="item.id" :key="item.id">{{ item.content }}</Option>
    </Select>
    <Divider />
    <List v-if="commentList.length != 0">
      <ListItem v-for="comment in commentList.data" :key="comment.id">
        <ListItemMeta :avatar="comment.user.avatar" :title="comment.user.nickname">
          <template slot="description">
            {{comment.content}}
            <br />
            <Time :time="comment.comment_time" />
          </template>
        </ListItemMeta>
        <template slot="action">
          <li>
            <a href="#" @click="showConfirmModal(comment.id)" style="color: #e74c3c">删除</a>
          </li>
        </template>
      </ListItem>
    </List>
    <div v-else-if="noteList.length != 0" class="comment-default">该手记暂无评论</div>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";

export default {
  mixins: [getBasicInfo],
  data() {
    return {
      noteList: [],
      commentList: []
    };
  },
  mounted() {
    this.fetchNotes();
    if (this.$route.query.nid) this.fetchComments();
  },
  methods: {
    fetchNotes() {
      this.axios
        .get(`/api/note?uid=${this.getUid}`)
        .then(res => {
          this.noteList = res.data;
          // this.paginationUrl = "/api/note/";
        })
        .catch(error =>
          this.$Notice.error({ title: "网络连接失败", desc: error })
        );
    },
    fetchComments(id) {
      this.axios
        .get(`/api/note_comment/${this.$route.query.nid}`)
        .then(res => {
          if (res.data.data.length != 0) {
            this.commentList = res.data;
          } else {
            this.commentList = [];
          }
          // this.paginationUrl = `/api/note_comment/${id}`;
        })
        .catch(error =>
          this.$Notice.error({ title: "网络连接失败", desc: error })
        );
    },
    onSelect(item) {
      this.$router.push({ path: "note_comments", query: { nid: item.value } });
      this.fetchComments();
    },
    showConfirmModal(id) {
      this.$Modal.confirm({
        title: "删除评论",
        content: `您确定要删除该条评论吗？`,
        onOk: () => {
          this.axios.delete(`/api/note_comment/${id}`).then(res => {
            this.fetchComments();
            this.$Message.success("删除成功");
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.n-c-m {
  width: 75%;
  margin: 20px auto;
  border: 1px solid #d7dadf;
  border-radius: 5px;
  padding: 30px;

  .comment-default {
    text-align: center;
    padding: 50px 0;
  }
}
</style>